<template>
	<view>
		<!-- 自定义导航栏 -->
		<z-nav-bar transparentFixedFontColor="#000" type="transparentFixed" title="余额提现"></z-nav-bar>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="h-bg" :style="'background-image: url('+headBgImg+');'"></view>
		<view class="main">
			<view class="content">
				<view class="title">
					提现方式
				</view>
				<view class="wx-num">
					<radio-group @change="radioChange">
						<label class="radio"><radio name="sex" value="1" class="round blue" style="transform:scale(0.7);" :checked="payType == 1 ? true : false" />微信</label>
						<label class="radio"><radio name="sex" value="0" class="round blue" style="transform:scale(0.7)" :checked="payType == 0 ? true : false" />支付宝</label>
					</radio-group>
				</view>
				<view class="wx-num" v-if="payType == 0">
					<input class="input" v-model="wx_num" type="number" placeholder="请输入支付宝账号" placeholder-class="yangshi" />
				</view>
				<view class="title">
					提现金额
				</view>
				<view class="price flex align-item">
					<view class="title">
						￥
					</view>
					<view class="">
						<input class="input" v-model="withdrawal_num" type="number" placeholder="请输入提现金额" placeholder-class="yangshi"  @input="inputChange" />
					</view>
				</view>
				<view class="flex align-item">
					<view class="tixain-num">
						可提现金额 {{ userInfo.balance || 0.00 }}
					</view>
					<view class="tixian-btn" @click="wholeTixian">
						全部提现
					</view>
				</view>
				<view class="tishi">
					注：满{{ sysSiteData.min_withdrawal || '' }}可提现
				</view>
				<view class="invitation flex">
					<view class="invitation-btn invitation-btn-on" v-if="withdrawal_num" @click="$u.throttle(tixian,1000)">
						提交
					</view>
					<view class="invitation-btn" v-else>
						提交
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			imgUrl: this.$http.baseUrl, // 服务器域名
			headBgImg: this.$http.baseUrl + 'static/web/img/apply-bg.png', // 顶部背景
			wx_num: '', //提现支付宝账号
			withdrawal_num: '', // 提现金额
			userInfo: {}, // 存储用户信息
			sysSiteData: [], // 存储小程序配置信息
			payType: 1, // 支付方式 1 微信 0支付宝
		};
	},
	// computed: {
	// 	...mapState(['userInfo']),
	// },
	onLoad(e) {
		var that = this
		that.userInfo = this.$store.state.userInfo
		that.getSysSite()
	},
	//页面显示
	onShow() {
		
	},
	onReady() {
		
	},
	// 触底触发
	onReachBottom() {
		
	},
	// 下拉刷新
	onPullDownRefresh(){
		
	},
	//方法
	methods: {
		// 获取小程序配置
		getSysSite(){
			var that = this
			that.$http.get('api/SysSite/index').then(res=> {
				that.sysSiteData = res.list[0]
			})
		},
		// 全部提现
		wholeTixian(){
			this.withdrawal_num = this.userInfo.balance
		},
		// 修改支付方式
		radioChange(evt){
			this.payType = evt.detail.value
			if(evt.detail.value == 1){
				this.wx_num = ''
			}
		},
		// 限制提现金额
		inputChange(e){
			if (e.detail.value.indexOf(".") < 0 && e.detail.value != "") {
				if(e.detail.value.length>5){
					e.detail.value =e.detail.value.substring(0, e.detail.value.length - 1)
					uni.showToast({
						title:'金额最高不能超过10000',
						icon:'none'
					})
				}else{
					e.detail.value = parseFloat(e.detail.value);
				}
			} else if (e.detail.value.indexOf(".") == 0) {
				    console.log('首位小数点情况')
					e.detail.value = e.detail.value.replace(/[^$#$]/g, "0.");
					e.detail.value = e.detail.value.replace(/\.{2,}/g, ".");
			}else if(!(/^(\d?)+(\.\d{0,2})?$/.test(e.detail.value))){
			          //去掉最后一位
					e.detail.value = e.detail.value.substring(0, e.detail.value.length - 1)
			}
			this.$nextTick(function(){
					this.withdrawal_num = e.detail.value
			})
		},
		// 提现
		tixian(){
			var that = this
			if(!that.userInfo['uid']){
				uni.showToast({
				    title: '请前往授权登录',
					icon: 'none',
				    duration: 1000
				});
				setTimeout(function() {
					uni.switchTab({
						url: '/pages/my/my'
					});
				}, 1000);
			}else{
				if(that.payType == 0 && !that.wx_num){
					uni.showToast({
						title: '请输入支付宝账号',
						icon: 'none'
					})
					return false
				}
				if(!that.withdrawal_num){
					uni.showToast({
						title: '请输入提现金额',
						icon: 'none'
					})
					return false
				}
				if(that.withdrawal_num < that.sysSiteData.min_withdrawal){
					uni.showToast({
						title: '提现金额不能小于' + that.sysSiteData.min_withdrawal + '元',
						icon: 'none'
					})
					return false
				}
				if(that.withdrawal_num > that.userInfo.balance){
					uni.showToast({
						title: '提现金额不能大于余额',
						icon: 'none'
					})
					return false
				}
				that.$http.post('api/ZhWithdrawalExamine/add',{
					'wx_num': that.wx_num,
					'withdrawal_num': that.withdrawal_num,
					'pay_type': that.payType
				}).then(res=> {
					if(res){
						that.getUserInfo()
						uni.showToast({
							title: '提交审核成功',
							icon: 'none'
						})
						that.withdrawal_num = ''
					}
				})
			}
		},
		// 获取用户信息 
		getUserInfo(){
			var that = this
			that.$http.get('api/Member/view').then(res=> {
				that.userInfo = res
			})
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style>
.yangshi {
	font-size: 28rpx;
	font-family: PingFangSC-Light, PingFang SC;
	font-weight: 300;
	color: #BEC6D3;
}
.input {
	width: 100%;
}
</style>
<style lang="scss" scoped>
.flex {
	display: flex;
}
.align-item {
	align-items: center;
}
.j-between {
	justify-content: space-between;
}
.column {
	flex-direction: column;
}
.h-bg {
	width: 100%;
	padding: 196rpx 0 60rpx;
}
.title {
	font-size: 32rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 600;
	color: #000013;
}
.main {
	padding: 0 30rpx;
	background: linear-gradient(180deg, #F0ECFF 0%, #F9F9F9 100%);
	.content {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx 30rpx 110rpx;
		margin-top: -60rpx;
		.tixain-num {
			font-size: 24rpx;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #6A6A7E;
		}
		.price {
			margin: 24rpx 0 40rpx;
		}
		.tixian-btn {
			font-size: 24rpx;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #C2C6CF;
			margin-left: 24rpx;
		}
		.tixian-btn-on {
			color: #7F5AFF;
		}
		.tishi {
			font-size: 24rpx;
			font-family: PingFangSC-Light, PingFang SC;
			font-weight: 300;
			color: #E31513;
			margin-top: 16rpx;
		}
		.wx-num {
			margin: 24rpx 0 80rpx;
		}
		.invitation {
			justify-content: center;
			margin-top: 82rpx;
			.invitation-btn {
				width: 82%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				background: #BEC6D3;
				border-radius: 16rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
			.invitation-btn-on {
				background: #7F5AFF;
			}
		}
	}
	
}
</style>
